<template>
	<view>
		<!--<page-head:title="title"></page-head> -->
		<!--页面标题头begin-->
		<view class="smart-page-head">
			<view class="smart-page-head-title">checkbox多选框</view>
		</view>
		 <view class="uni-padding-wrap uni-common-mt">
		            <view class="uni-title uni-common-mt">默认样式</view>
		            <view>
		                <checkbox-group>
		                    <label>
		                        <checkbox value="cb1" checked="true" />选中
		                    </label>
		                    <label>
		                        <checkbox value="cb2" />未选中
		                    </label>
		                </checkbox-group>
		            </view>
		            <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
		            <view>
		                <checkbox-group>
		                    <label>
		                        <checkbox value="cb1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
		                    </label>
		                    <label>
		                        <checkbox value="cb2" color="#FFCC33" style="transform:scale(0.7)" />未选中
		                    </label>
		                </checkbox-group>
		            </view>
		        </view>
		
		        <view class="uni-padding-wrap">
		            <view class="uni-title uni-common-mt">
		                推荐展示样式
		                <text>使用 uni-list 布局</text>
		            </view>
		        </view>
		
		        <view class="uni-list">
		            <checkbox-group @change="checkboxChange">
		                <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
		                    <view>
		                        <checkbox :value="item.value" :checked="item.checked" />
		                    </view>
		                    <view>{{item.name}}</view>
		                </label>
		            </checkbox-group>
		        </view>
		<!--页面标题头end-->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title:'checkbox 复选框',
				items: [{
					value:'USA',
					name: '美国'
				},{
					value:'CHN',
					name: '美国'
				},{
					value:'BRA',
					name: '巴西'
				},{
					value:'JAN',
					name: '日本'
				},{
					value:'ENG',
					name: '英国'
				},{
					value:'FRA',
					name: '法国'
				}],
			}
		},
		methods:{
			checkboxChange:function(e){
				var items = this.items,
					values = e.detail.value;
				for(var i = 0,lenI = items.length;i < lenI; ++i){
					const item = items[i]
					if(values.indexOf(item.value)>=0){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			}
		}
	}
</script>

<style>
	.smart-page-head-title{
		    font-size: 48rpx;
		    color: #c0bab7;
		    opacity: 1;
		    /* 新增代码 */
		    text-align: center; /* 水平居中显示 */
		    text-decoration: underline; /* 添加下划线 */
			}
	.uni-list-cell {
		justify-content: flex-start
	}
</style>